<template>
  <!-- 集团简介 -->
  <div class="companytPc">
    <div class="header">
      <div class="name">{{ getNavInfo("groupProfileIndex").name }}</div>
      <div class="en">{{ getNavInfo("groupProfileIndex").description }}</div>
    </div>
    <div class="line"></div>
    <div class="box">
      <div class="left">
        <div class="text">
          {{ data?.article?.description }}
        </div>
        <router-link :to="{ name: 'groupProfileIndex' }" class="more">
          <div class="more-text">查看更多</div>
          <img class="ic" src="../assets/image/home/ic_right.png" />
        </router-link>
      </div>
      <div class="right" v-if="data">
        <img
          class="right"
          v-if="!data?.article?.videofile"
          :src="data?.article?.webimages"
        />
        <video
          class="right"
          v-if="data?.article?.videofile"
          :poster="data?.article?.webimages"
          controls
        >
          <source :src="data?.article?.videofile" type="video/mp4" />
        </video>
        <!-- <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :options="playerOptions"></video-player> -->
      </div>
    </div>
    <div class="label-box">
      <div
        class="item"
        v-for="item in data?.intro"
        :key="item.id"
        @click="labelClick(item)"
      >
        <img class="ic" :src="item.webimages" />
        <div class="label-name">
          <div class="name">{{ item.name }}</div>
          <div class="en">{{ item.description }}</div>
        </div>
      </div>
    </div>
    <label-dialog :data="labelData" @cancel="cancel" v-if="isLabel" />
  </div>
  <!-- 移动端 -->
  <div class="companytM">
    <div class="header">
      <div class="name">{{ getNavInfo("groupProfileIndex").name }}</div>
      <div class="en">{{ getNavInfo("groupProfileIndex").description }}</div>
    </div>
    <div class="line"></div>
    <div class="box">
      <div class="right">
        <img
          class="right"
          v-if="!data?.article?.videofile"
          :src="data?.article?.mobileimages"
        />
        <video
          class="right"
          v-if="data?.article?.videofile"
          :poster="data?.article?.mobileimages"
          controls
        >
          <source :src="data?.article?.videofile" type="video/mp4" />
        </video>
        <!-- <video-player v-if="data" class="video-player vjs-custom-skin" ref="videoPlayer" :options="playerOptions">
        </video-player> -->
      </div>
      <div class="left">
        <div class="text">
          {{ data?.article?.description }}
        </div>
      </div>
    </div>
    <div class="label-box">
      <div
        class="item"
        v-for="item in data?.intro"
        :key="item.id"
        @click="labelClick(item)"
      >
        <img class="ic" :src="item.webimages" />
        <div class="label-name">
          <div class="name">{{ item.name }}</div>
          <div class="en">{{ item.description }}</div>
        </div>
      </div>
    </div>
    <router-link class="more" to="groupProfileIndex">
      <more-detail style="margin-top: 20px" name="查看更多" />
    </router-link>
    <label-dialog :data="labelData" @cancel="cancel" v-if="isLabel" />
  </div>
</template>

<script>
import labelDialog from "@/views/modules/about/labelDialog";
import { mapGetters } from "vuex";
export default {
  components: { labelDialog },
  computed: {
    ...mapGetters("common", ["getNavInfo"]),
  },
  props: {
    data: Object,
  },
  watch: {
    data(newData) {
      this.playerOptions.sources[0].src = newData?.article?.videofile;
      this.playerOptions.poster = newData?.article?.webimages;
    },
  },
  data() {
    return {
      isLabel: false,
      labelData: null,
      playerOptions: {
        height: 400,
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: "", // url地址
          },
        ],
        poster: "", // 您的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, // 全屏按钮
        },
      },
    };
  },

  // computed: {
  //   player() {
  //     return this.$refs.videoPlayer.player;
  //   },
  // },

  methods: {
    /**标签详情 */
    labelClick(item) {
      this.labelData = item;
      this.isLabel = true;
    },
    cancel() {
      this.isLabel = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.companytM {
  display: none;
}

.companytPc {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("~@/assets/image/about/profile_bg.png");
  display: flex;
  height: 729px;
  flex-direction: column;
  align-items: center;

  .label-box {
    width: 1200px;
    margin-top: 88px;
    display: flex;
    justify-content: space-between;

    .item {
      display: flex;
      height: 50px;

      .ic {
        width: 50px;
        height: 50px;
      }

      .label-name {
        cursor: pointer;
        margin-left: 15px;

        &:hover {
          .name {
            letter-spacing: 4px;
            height: 23px;
            font-size: 22px;
            color: color.$base;
          }

          .en {
            color: color.$base;
            margin-top: 9px;

            font-size: 12px;
            color: color.$base;
          }
        }

        .name {
          letter-spacing: 4px;

          height: 23px;
          font-size: 22px;
          color: #333333;
        }

        .en {
          margin-top: 9px;
          font-size: 12px;
          color: #999999;
        }
      }
    }
  }

  .box {
    margin-top: 64px;
    display: flex;
    justify-content: space-between;
    width: 1200px;
    height: 329px;

    .left {
      .text {
        white-space: pre-wrap;
        width: 568px;
        font-size: 18px;
        color: #666666;
        line-height: 28px;
      }

      .more {
        display: flex;
        width: 130px;
        height: 30px;
        align-items: center;
        margin-top: 55px;

        .more-text {
          font-size: 18px;
          font-weight: 400;
          color: color.$base;
        }

        .ic {
          margin-left: 4px;
          width: 18px;
          height: 18px;
        }
      }
    }

    .right {
      @include fn.scale(578px);
      border-radius: 4px;
    }
  }

  .header {
    margin-top: 77px;
    width: 1200px;
    display: flex;
    align-items: center;

    .name {
      height: 30px;
      font-size: 30px;
      color: #666666;
    }

    .en {
      margin-left: 7px;
      height: 17px;
      font-size: 22px;
      color: #bfbfbf;
    }
  }

  .line {
    margin-top: 14px;
    width: 1200px;
    height: 1px;
    background: #ee7800;
  }
}
</style>
<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .companytPc {
    display: none;
  }

  .companytM {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("~@/assets/image/about/m-h-bg.png");
    display: block;
    padding: 0 fn.rpx(26);

    .label-box {
      width: fn.rpx(600);
      margin: auto;
      margin-top: fn.rpx(20);
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;

      .item {
        margin-top: fn.rpx(20);
        display: flex;
        height: fn.rpx(50);
        width: fn.rpx(300);
        // flex: 0 0 50%;
        box-sizing: border-box;
        padding: 0 fn.rpx(10);

        // &:nth-of-type(odd) {
        //   justify-content: flex-end;
        //   padding-right: fn.rpx(84);
        // }

        // &:nth-of-type(even) {
        //   justify-content: flex-start;
        //   padding-left: fn.rpx(84);
        // }

        .ic {
          width: fn.rpx(50);
          height: fn.rpx(50);
        }

        .label-name {
          cursor: pointer;
          margin-left: fn.rpx(12);

          &:hover {
            .name {
              letter-spacing: fn.rpx(4);

              height: fn.rpx(23);
              font-size: fn.rpx(22);
              font-weight: 500;
              color: color.$base;
            }

            .en {
              margin-top: fn.rpx(9);

              font-size: fn.rpx(12);
              font-weight: 400;
              color: color.$base;
            }
          }

          .name {
            letter-spacing: fn.rpx(4);

            height: fn.rpx(23);
            font-size: fn.rpx(22);
            font-weight: 500;
            color: #333333;

            &:hover {
              color: color.$base;
            }
          }

          .en {
            margin-top: fn.rpx(9);
            font-size: fn.rpx(12);
            color: #999999;
          }
        }
      }
    }

    .box {
      margin-top: fn.rpx(40);
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;

      .left {
        margin-top: fn.rpx(30);

        .text {
          width: 100%;
          font-size: fn.rpx(18);
          font-weight: 400;
          color: #666666;
          white-space: pre-wrap;
        }
      }

      .right {
        @include fn.scale(fn.rpx(698));
        border-radius: fn.rpx(10);
      }
    }

    .header {
      margin-top: fn.rpx(45);
      width: 100%;
      display: flex;
      align-items: center;

      .name {
        font-size: fn.rpx(30);
        font-weight: 400;
        color: #666666;
      }

      .en {
        margin-left: fn.rpx(7);

        font-size: fn.rpx(22);
        font-weight: 400;
        color: #bfbfbf;
      }
    }

    .line {
      margin-top: fn.rpx(14);
      width: fn.rpx(698);
      height: fn.rpx(1);
      background: color.$base;
    }
  }
  .more {
    margin: auto;
    width: fit-content;
    display: block;
    margin-bottom: 20px;
  }
}
</style>